<template>
  <view class="balance-page">
    <view class="usd-balance">
      <text class="text1">美余额（USD）</text>
      <text class="text2">1234.00</text>
    </view>
    <view class="ab-balance">
      <text class="text1">阿币余额（代币缩写）</text>
      <text class="text2">1234.00</text>
    </view>
    <view class="container">
      <view class="item" style="border-bottom:1px solid #eee">
        <view class="left">
          <image src="../../../static/images/home_slices/balance/chongzhi.png"></image>
          <text class="text">充值</text>
        </view>
        <view class="grace-iconfont icon-arrow-right c6"></view>
      </view>
      <view class="item" @tap="handleUrl('/pages/HomePage/Balance/withdraw')">
        <view class="left">
          <image src="../../../static/images/home_slices/balance/tixian.png"></image>
          <text class="text">提现</text>
        </view>  
        <view class="grace-iconfont icon-arrow-right c6"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data(){
    return{}
  },
  methods: {
    handleUrl(url){
       uni.navigateTo({
        url: url
      })
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../../../styles/global/index";
.balance-page {
  padding: 0 28upx;
  background: #fff;
  padding-top: 54upx;
  position: absolute;
  left:0;
  right: 0;
  bottom: 0;
  top: 0;
}
.usd-balance {
  background: url("");
  background-size: cover;
  @include size(690upx, 284upx);
  background-repeat: no-repeat;
  margin: 0 auto;
  @include flex-cl;
  .text1 {
    color: #fff;
    font-size: 28upx;
    text-align: center;
  }
  .text2 {
    color: #fff;
    font-size: 72upx;
    text-align: center;
  }
}
.ab-balance {
  background: url("");
  background-size: cover;
  @include size(690upx, 284upx);
  background-repeat: no-repeat;
  margin: 30upx auto 0 auto;
  @include flex-cl;
  .text1 {
    color: #fff;
    font-size: 28upx;
    text-align: center;
  }
  .text2 {
    color: #fff;
    font-size: 72upx;
    text-align: center;
  }
}
.container{
  margin-top: 40upx;
  box-shadow:rgba(0,0,0,.1) 0px 0px 20upx;
  @include size(690upx,200upx);
  border-radius: 10upx;
  .item{
    @include flex-bw;
    margin: 0 34upx;
    height: 50%;
    .left{
      @include flex-center;
      image{
       @include size(48upx,48upx);
      }
      .text{
        padding-left:22upx;
      }
    }
  }
}
</style>